@import "@/common/constants/StyleConst.scss";

.menu-container {
  height: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 0 !important;

  .v-navigation-drawer__content {
    height: 100vh;
    display: flex;
    align-items: start;
    background-color: $color-theme-orange;

    .menu-list {
      min-height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .v-list-item {
        flex: unset;
        height: 48px;
        align-items: center;
        margin: 12px auto;
        padding: 0;

        .menu-icon {
          background-color: $color-theme-lightgrey;
          border-radius: 16px;
          width: 48px;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#4A4A4A)";
          /*IE 8*/
          -moz-box-shadow: 1px 1px 10px 3px rgba(74, 74, 74, 0.5);
          /*FF 3.5+*/
          -webkit-box-shadow: 1px 1px 10px 3px rgba(74, 74, 74, 0.5);
          /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
          box-shadow: 1px 1px 10px 3px rgba(74, 74, 74, 0.5);
          /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
          filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#4A4A4A);

          /*IE 5.5-7*/
          .v-icon {
            color: $color-theme-navy;
          }
        }

        .menu-icon.checked {
          background-color: $color-theme-navy;
          border-radius: 16px;
          width: 48px;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;

          .v-icon {
            color: $color-theme-lightgrey;
          }
        }
      }
    }
  }
}